<html>
    <head>
        <meta charset="UTF-8">
        <title>自己练习</title>
    </head>
    <body>
        <div id="app">
            <h2>1. 双大括号表达式</h2>
                <p>我是男生 {{ name1 }}</p>
                <p>我是女生 {{ name2 . toUpperCase() }},全部大写显示</p>
                <p v-text=" name3 "></p>
                <p v-html=" name3 "></p>

            <h2>2. 指令一: 强制数据绑定</h2>
                <p><img v-bind:src="name4" /></p>
                <p><img :src="name4" /></p>

            <h2>3. 指令二: 绑定事件监听</h2>
                <button v-on:click="fun1">  test1 </button>
                <hr/>
                <button v-on:click="fun1_1('123abc')">  test1_1 </button>
                <hr/>
                <button @click="fun2">  test2 </button>

        </div>
    </body>
</html>

<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            name1:"zhangsan",
            name2:"lisi",
            name3:"<a href='https://www.baidu.com' target='_blank'>百度网址</a>",
            name4:"https://himg.bdimg.com/sys/portraitn/item/public.1.7877e9ad.Hxa-SeMr6rZ7GV0DTRi_9Q?_d=29170538",
        },
        methods:{
            fun1(){
                alert('v-on:click  1111')
            },
            fun1_1(a){
                alert('括号可写 可不写'+a)
            },
            fun2(){
                alert('@符强制绑定 1111')
            },
        }
    })
</script>